import {
  CameraControls,
  Environment,
  MeshReflectorMaterial,
} from '@react-three/drei';
import { useFrame, useThree } from '@react-three/fiber';
import { useEffect, useRef } from 'react';
import TWEEN from 'tween';
import { button, useControls } from 'leva';
import CameraControlsContext from '../context/CameraControlsContext';
import AirStopping from '../models/AirStopping';
import Annulus from '../models/Annulus';
import BeltConveyor from '../models/BeltConveyor';
import CoalChute from '../models/CoalChute';
import FeedCrusher from '../models/FeedCrusher';
import FeedingInlet from '../models/FeedingInlet';
import FullyMechanizedExcavator from '../models/FullyMechanizedExcavator';
import People from '../models/People';
import ShuttleCar from '../models/ShuttleCar';
import TwoArmTrolley from '../models/TwoArmTrolley';
import { toLessen, toRecover, getCenterPosition } from '@/utils/format';

const World = (props) => {
  const annulusRef = useRef();
  const cameraControlsRef = useRef();
  const feedingInletRef = useRef();
  const twoArmTrolleyRef = useRef();
  const airStoppingRef = useRef();
  const fullyMechanizedExcavatorRef = useRef();
  const peopleRef = useRef();
  const feedCrusherRef = useRef();
  const coalChuteRef = useRef();
  const shuttleCarRef = useRef();
  const beltConveyorRef = useRef();
  const { camera, scene } = useThree();

  const switchView = (type) => {
    if (type == '给料破碎机') {
      cameraControlsRef.current.setLookAt(-10, 4, -10, 0, 0, 0, true);
      toRecover(feedCrusherRef.current);
      peopleRef.current.position.x = -4;
      peopleRef.current.position.z = -3;
    } else {
      toLessen(feedCrusherRef.current);
    }
    if (type == '运输装备') {
      cameraControlsRef.current.setLookAt(9, 4, -11, 0, 0, 0, true);
      toRecover(beltConveyorRef.current);
      peopleRef.current.position.x = -4;
      peopleRef.current.position.z = -3;
    } else {
      toLessen(beltConveyorRef.current);
    }
    if (type == '掘进装备') {
      cameraControlsRef.current.setLookAt(10, 3, 9, 0, 0, 0, true);
      toRecover(fullyMechanizedExcavatorRef.current);
      peopleRef.current.position.x = 5;
      peopleRef.current.position.z = -4;
    } else {
      toLessen(fullyMechanizedExcavatorRef.current);
    }
    if (type == '辅助作业装备') {
      cameraControlsRef.current.setLookAt(8, 4, 12, 0, 0, 0, true);
      toRecover(shuttleCarRef.current);
      peopleRef.current.position.x = 5;
      peopleRef.current.position.z = 4;
    } else {
      toLessen(shuttleCarRef.current);
    }
    if (type == '锚护装备') {
      cameraControlsRef.current.setLookAt(7, 3, 12, 0, 0, 0, true);
      toRecover(twoArmTrolleyRef.current);
      peopleRef.current.position.x = 5;
      peopleRef.current.position.z = 4;
    } else {
      toLessen(twoArmTrolleyRef.current);
    }
    if (type == '密闭墙') {
      cameraControlsRef.current.setLookAt(-12, 3, 5, 0, 0, 0, true);
      toRecover(airStoppingRef.current);
      peopleRef.current.position.x = -6.3;
      peopleRef.current.position.z = -2;
    } else {
      toLessen(airStoppingRef.current);
    }
    if (type == '溜煤眼或煤仓上口') {
      cameraControlsRef.current.setLookAt(9, 4, -11, 0, 0, 0, true);
      toRecover(coalChuteRef.current);
      peopleRef.current.position.x = 6;
      peopleRef.current.position.z = -3;
    } else {
      toLessen(coalChuteRef.current);
    }
    if (type == '采煤工作面转载机入料口') {
      cameraControlsRef.current.setLookAt(-12, 3, -7, 0, 0, 0, true);
      toRecover(feedingInletRef.current);
      peopleRef.current.position.x = 1;
      peopleRef.current.position.z = -6;
    } else {
      toLessen(feedingInletRef.current);
    }
  };
  // useControls({
  //   获取当前摄像头属性: button(() => {
  //     const cameraNowOption = camera;
  //     const newposition = cameraNowOption.position;
  //     const newlookat = getCenterPosition(cameraControlsRef, 50);
  //     console.log(
  //       `cameraControlsRef.current.setLookAt(${newposition.x | 0}, ${newposition.y | 0
  //       }, ${newposition.z | 0}, ${newlookat.x | 0}, ${newlookat.y | 0}, ${newlookat.z | 0
  //       }, true)`,
  //     );
  //   }),
  //   掘进装备: button(() => {
  //     switchView('掘进装备');
  //   }),
  //   锚护装备: button(() => {
  //     switchView('锚护装备');
  //   }),
  //   辅助作业装备: button(() => {
  //     switchView('辅助作业装备');
  //   }),
  //   运输装备: button(() => {
  //     switchView('运输装备');
  //   }),
  //   给料破碎机: button(() => {
  //     switchView('给料破碎机');
  //   }),
  //   密闭墙: button(() => {
  //     switchView('密闭墙');
  //   }),
  //   采煤工作面转载机入料口: button(() => {
  //     switchView('采煤工作面转载机入料口');
  //   }),
  //   溜煤眼或煤仓上口: button(() => {
  //     switchView('溜煤眼或煤仓上口');
  //   }),
  //   人员报警: button(() => {
  //     peopleRef.current.visible = !peopleRef.current.visible;
  //   }),
  // });
  useFrame(() => {
    TWEEN.update(); // 计算递增递减的值
    const time = new Date().getTime() * 0.005; // 时间因子
    const newValue = (Math.sin(time) + 1) / 2; // 正弦函数的值范围在 -1 到 1，加上 1 之后变成 0 到 2，再除以 2 就变成了 0 到 1
    scene.getObjectByName('peopleMeshMater').material.opacity = newValue;
    scene.getObjectByName('line1').material.opacity = newValue + 0.1;
    scene.getObjectByName('line2').material.opacity = newValue + 0.1;

  });
  useEffect(() => {
    switchView('给料破碎机');
    window.addEventListener('message', (event) => {
      switchView(event.data)
    });
  }, [scene]);
  return (
    <>
      <CameraControls
        ref={cameraControlsRef}
        enabled={true}
        infinityDolly={true}
        dollyToCursor={true}
      ></CameraControls>
      <CameraControlsContext.Provider value={cameraControlsRef}>
        <mesh position={[0, -1.5, 0]} rotation={[-Math.PI / 2, 0, 0]}>
          <planeGeometry args={[1000, 1000]} />
          <MeshReflectorMaterial
            blur={[300, 100]}
            resolution={1024}
            mixBlur={1}
            mixStrength={9}
            depthScale={1}
            minDepthThreshold={0.65}
            color="#2b2b2b"
            metalness={0.6}
            roughness={1}
          />
        </mesh>
        <Annulus ref={annulusRef} />
        <FeedingInlet ref={feedingInletRef} />
        <FullyMechanizedExcavator ref={fullyMechanizedExcavatorRef} />
        <TwoArmTrolley ref={twoArmTrolleyRef} />
        <People ref={peopleRef} />
        <CoalChute ref={coalChuteRef} />
        <FeedCrusher ref={feedCrusherRef} />
        <ShuttleCar ref={shuttleCarRef} />
        <AirStopping ref={airStoppingRef} />
        <BeltConveyor ref={beltConveyorRef} />
      </CameraControlsContext.Provider>
      <Environment files="/img/kiara.hdr" />
    </>
  );
};

export default World;
